<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>添加分类</title>
		<script type="text/javascript" src="scripts/jquery.min.js"></script>
		<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
		<script type="text/javascript" src="scripts/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="scripts/bootstrapValidator.js"></script>
		<link href="styles/bootstrap.min.css" rel="stylesheet" />
		<link href="styles/bootstrapValidator.css" rel="stylesheet" />
		<link rel="stylesheet" href="styles/select2.css">
		<script type="text/javascript" src="scripts/select2.js"></script>

</head>
<body>
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h4 class="modal-title" id="myModalLabel">添加分类</h4>
	</div>
	<div class="modal-body">
		<form role="form" class="form-horizontal" method="post" id="categoryForm">
			<div class="form-group">
				<label class="col-sm-3 control-label">类型名称：</label>
				<div class="col-sm-9">
					<input type="text" name="category.type" value="${category.type}" class="form-control" placeholder="请输入类型名" />
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-3 control-label">上级分类：</label>
				<div class="col-sm-9">
					<select name="category.pid" class="form-control" style="width: 100%" id="categoryPid">
						<c:forEach var="category" items="${categoryList}">
							<option value="${category.id}">${category.type}</option>
						</c:forEach>
					</select>
				</div>
			</div>
		</form>
	</div>
	<div class="modal-footer">
		<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
		<button type="button" class="btn btn-primary" onclick="editCategory()">提交</button>
	</div>

	<script type="text/javascript">
		$("#categoryPid").select2({
			placeholder : '请选择上级分类'
		});

		$(document).ready(function() {
			var id = ${id};
			if (id > 0) {
				var pid = ${category.pid};
				$("#categoryPid").val(pid).trigger('change');
			} else {
				var pid = ${pid};
				$("#categoryPid").val(pid).trigger('change');
			}
		});

		function editCategory() {
			if ("${id}" > 0) {
				document.forms[0].action = "categoryAction!update.action";
			} else {
				document.forms[0].action = "categoryAction!create.action";
			}
			document.forms[0].submit();
		};
		
		$(function(){
			if('${id}'>0){
				$("#myModalLabel").text("修改分类");
			}
		});
	</script>
	
	<script type="text/javascript">
	
	$(document).ready(function() {
	    $('#categoryForm').bootstrapValidator({
	        message: 'This value is not valid',
	        feedbackIcons: {
	            valid: 'glyphicon glyphicon-ok',
	            invalid: 'glyphicon glyphicon-remove',
	            validating: 'glyphicon glyphicon-refresh'
	        },
	        fields: {
	            "category.type": {
	                message: 'The username is not valid',
	                validators: {
	                    notEmpty: {
	                        message: '类型名称不能为空'
	                    }
	        		}
	            }
	        }
	        });
	});
	</script>

</body>
</html>